<template>
	<div class="container-item" :class="{'skew-border': isSkew}">
		<div class="title" :class="hasNav ? 'has-nav' : ''">
			<h1>{{ title }}</h1>
			<div class="tail">
				<template v-if="!hasNav">
					<p v-if="action">{{action}}</p>
					<p class="icon" v-else></p>
				</template>
				<span class="point"></span>
			</div>
		</div>
		<div class="container-item-content">
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: 'ItemWrap',
	props: {
		title: {
			type: String,
			default: ''
		},
		action: {
			type: String,
			default: ''
		},
		hasNav: {
			type: Boolean,
			default: false
		},
		isSkew: {
			type: Boolean,
			default: false
		},
	}
}
</script>
<style lang="less" scoped>
.fakeEle(@content: "") {
	position: absolute;
	content: @content;
}
.container-item {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: linear-gradient(290.3deg, rgba(9, 19, 24, .5) 23.67%, rgba(32, 49, 54, .5) 100%);
	.title {
		position: relative;
		display: flex;
		justify-content: space-between;

		/*渐变线*/
		&:before {
			.fakeEle();
			left: 0;
			bottom: -2px;
			width: 200px;
			height: 2px;
			background: linear-gradient(270deg, #23c7c7, #e2fdff, #40e5f0);
			mask: linear-gradient(45deg, #000 40%, transparent 60%);
			z-index: 2;
		}

		/*下横直线*/
		&:after {
			.fakeEle();
			left: 0;
			bottom: -2px;
			width: calc(100% - 140px);
			border-image: linear-gradient(90deg, #40e5f0 27%, #40e5f0 90%) 1;
			border-bottom: 2px solid;
			z-index: 1;
		}

		h1 {
			width: calc(100% - 107px);
			background: linear-gradient(89.99deg, rgb(12, 64, 93) 0.01%, rgb(10, 42, 56) 56.76%, rgb(9, 21, 24) 96.82%);
			mask: linear-gradient(-45deg, transparent 25px, #FFFFFF 1%) top right;
			font-size: 22px;
			font-weight: 500;
			line-height: 36px;
			color: #FFFFFF;
			text-shadow: 2px 2px 6px rgba(109, 238, 250, .16);
			font-family: "Source Han Sans";
			position: relative;
			padding-left: 58px;

			&:before {
				.fakeEle();
				left: 32px;
				top: 50%;
				transform: translateY(-50%);
				border-left: 12px solid #40e5f0;
				border-top: 7px solid transparent;
				border-bottom: 7px solid transparent;
			}

			&:after {
				.fakeEle();
				left: 24px;
				top: 50%;
				transform: translateY(-50%);
				border-left: 12px solid rgba(64, 229, 240, .5);
				border-top: 7px solid transparent;
				border-bottom: 7px solid transparent;
			}
		}

		.tail {
			width: 140px;
			height: 36px;
			position: relative;
			/*倾斜的图标*/

			p.icon {
				position: absolute;
				right: -10px;
				top: 9px;
				width: 110px;
				height: 20px;
				background: linear-gradient(270deg, #000 0, #40e5f0 90%, #41e5f1);
				mask: linear-gradient(90deg, #ff0 0, #ff0, 20%, transparent 0, transparent 30%, #ff0 0, #ff0 45%, transparent 0, transparent 55%, #ff0, #ff0 65%, transparent 0, transparent 75%, #ff0 0, #ff0 80%, transparent 0, transparent);
				transform: skew(137deg, 0);
			}

			/*点*/

			span {
				position: absolute;
				right: 0;
				top: 0;
				width: 5px;
				height: 5px;
				background: #32ffe6;
				border-radius: 100%;
				box-shadow: 0 0 4px #32ffe6;
			}

			/*斜线*/

			&:before {
				.fakeEle();
				width: 1.5px;
				height: 100%;
				background-image: linear-gradient(90deg, #40e5f0 27%, #40e5f0 90%);
				transform: rotate(-135deg) scale(1.39);
				left: 15px;
				top: 2px;
				border-radius: 2px;
				z-index: 9999;
			}

			/*上横线*/

			&:after {
				.fakeEle();
				width: 108px;
				height: 2px;
				background-image: linear-gradient(90deg, #40e5f0 27%, #40e5f0 90%);
				right: 0;
				top: 2px;
				border-radius: 2px;
				z-index: 9999;
			}
		}

		/*页面存在路由时*/
		&.has-nav {
			&:after {
				width: 366px;
			}
			h1 {
				width: 400px;
			}
			.tail {
				flex: 1;
				&:before {
					left: -18px;
				}
				&:after {
					width: 100%;
				}
			}
		}
	}
	.container-item-content {
		width: 100%;
		height: calc(100% - 38px);
		box-sizing: border-box;
		padding: 24px;
		border: 1px solid #006686;
	}
}

</style>
